<template>
  <div
    class="v-text"
    :style="{ overflow: config.lamp ? 'hidden' : 'visible' }"
    :class="config.class"
    onselectstart="return flase"
  >
    <a
      :href="config.isLink ? config.link : 'javascript:void(0);'"
      :style="textStyle"
      :ref="id"
      :class="
        config.lamp
          ? config.reverse
            ? 'text_animation'
            : 'text_animation1'
          : ''
      "
      v-html="text"
    ></a>
  </div>
</template>

<script>
import dayjs from "dayjs";
import CommonMixin from "../mixins/commonMixin";
export default {
  name: "v-text",
  mixins: [CommonMixin],
  data() {
    return {
      t: -1,
      text: "",
    };
  },
  methods: {
    init() {
      if (this.config.dateflag) {
        this.dateFormat();
        if (this.t >= 0) {
          clearInterval(this.t);
          this.t = -1;
        }
        this.t = setInterval(this.dateFormat, 1000);
        return;
      }
      this.text = this.config.context;
    },
    dateFormat() {
      this.text = dayjs(new Date()).format(this.config.dateformat);
    },
    update() {
      this.init();
    },
  },
  computed: {
    textStyle() {
      let styleObj = {
        "font-size": `${this.config.fontSize}px`,
        color: this.config.color,
        "letter-spacing": `${this.config.spacing}px`,
        "text-align": this.config.align,
        "font-weight": this.config.weight,
        display: "flex",
        "line-height": `${this.location.height}px`,
        backgroundColor: this.config.backgroundColor,
        "animation-iteration-count": "infinite",
        "animation-timing-function": "cubic-bezier(0, 0, 1, 1)",
        "white-space": "nowrap",
        overflow: this.config.lamp ? "hidden" : "visible",
      };
      if (this.config.lamp) {
        styleObj["animation-duration"] = `${this.config.speed}s`;
      }
      return styleObj;
    },
  },
};
</script>

<style scoped>
.v-text {
  width: 100%;
  height: 100%;
  white-space: nowrap;
}
.v-text > a {
  align-items: center;
  width: 100%;
  height: 100%;
}
@keyframes lefttoright {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes righttoleft {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.text_animation {
  animation-name: lefttoright;
}
.text_animation1 {
  animation-name: righttoleft;
}
</style>
